<script setup lang="ts">
import { useRouter } from 'vue-router'

import { useCounterStore } from '@store/counterStore'
import Language from '@/components/Language.vue'
import LangMap from '@/locales/LangMap'
import { loginApi } from '@/api/auth'
import { ElMessage } from 'element-plus'
import SvgIcon from './SvgIcon.vue'


console.log("dev独有的环境变量：" + import.meta.env.VITE_DEV_PARAM);

console.log("baes url：" + import.meta.env.VITE_BASE_URL);

const counterStore = useCounterStore()

const router = useRouter()

function goBack() {
   router.back()
}
async function add100() {
   const result = await counterStore.add100()
   console.log(result)
}

function login() {
   loginApi({ username: 'lzp', password: '666' }).then(res => {
      ElMessage.success(res.data.accessToken)
   });
}


</script>

<template>
   <h1>{{ $t(LangMap.app_title) }}</h1>
   <SvgIcon name="renrwen" :size="60" style:=“color:red;background:red;></SvgIcon>
   <h1>
      这是demo页 当前计数：{{ counterStore.counter }}，计数两倍为：{{ counterStore.doubleCount }}
   </h1>
   <ul>
      <li>
         <el-button type="success" @click="goBack">返回上一页</el-button>
      </li>
      <li>
         <el-button type="warning" @click="counterStore.counter++">直接操作state去改变值</el-button>
      </li>
      <li>
         <el-button type="info" @click="counterStore.increment">increment方法自增值 </el-button>
      </li>
      <li>
         <el-button type="info" @click="add100()">异步加100 </el-button>
      </li>
      <li>
         <el-button type="primary" @click="login()">登录请求 </el-button>
      </li>
   </ul>
   <li>
      <Language />
   </li>
</template>

<style scoped>
.read-the-docs {
   color: #888;
}
</style>
